解锁 React Server Actions 的强大功能，实现无缝的表单处理和服务器端数据变更。学习如何构建高效、安全且用户友好的 Web 应用程序。
React Server Actions：表单处理与服务器集成的综合指南
React Server Actions 代表了我们使用 React 构建交互式 Web 应用程序方式的重大演进。它们使开发人员能够直接从 React 组件执行服务器端代码，从而简化表单处理、数据变更和其他依赖服务器的操作。本指南将全面概述 React Server Actions，涵盖其优势、实现细节和最佳实践。
什么是 React Server Actions？
Server Actions 是在服务器上运行的异步函数。它们可以直接从 React 组件中调用，让您无需编写单独的 API 端点即可处理表单提交、更新数据和执行其他服务器端逻辑。这种方法简化了开发，减少了客户端 JavaScript，并提高了应用程序性能。
Server Actions 的主要特点：
- 服务器端执行：Action 完全在服务器上运行，确保数据安全并防止敏感逻辑暴露给客户端。
- 从 React 组件直接调用：您可以直接在组件中调用 Server Actions，从而轻松地将服务器端逻辑集成到您的 UI 中。
- 异步操作：Action 是异步的，允许您执行耗时任务而不会阻塞 UI。
- 渐进式增强：Server Actions 支持渐进式增强，这意味着即使在禁用 JavaScript 的情况下，您的应用程序仍然可以正常工作。
使用 React Server Actions 的好处
与传统的客户端数据获取和变更技术相比，Server Actions 提供了几个引人注目的优势：
简化开发
通过消除对独立 API 端点的需求，Server Actions 减少了您需要编写的样板代码量。这可以显著简化您的开发工作流程，并使您的代码库更易于维护。您无需构建和管理 API 路由，而是定义与使用它们的组件共存的 Action。
提升性能
Server Actions 可以通过减少需要在客户端下载和执行的 JavaScript 数量来提高应用程序性能。它们还使您能够在服务器上执行数据转换和验证，这可以进一步减轻客户端的负担。服务器可以高效地管理数据处理，从而带来更流畅的用户体验。
增强安全性
由于 Server Actions 在服务器上运行，它们为处理敏感数据和操作提供了更安全的方式。您可以通过在服务器上执行验证和授权检查来保护您的数据免遭未经授权的访问和篡改。与可以被绕过的客户端验证相比，这增加了一层安全性。
渐进式增强
Server Actions 支持渐进式增强。这意味着即使 JavaScript 被禁用或加载失败，您的应用程序仍然可以正常运行。当 JavaScript 不可用时，表单将使用传统的 HTML 表单提交方式提交，服务器将相应地处理请求。这确保了您的应用程序能够被更广泛的用户访问，包括那些使用旧版浏览器或网络连接较慢的用户。
乐观更新
Server Actions 与乐观更新无缝集成。您可以立即更新 UI 以反映操作的预期结果，甚至在服务器确认更改之前。这可以显著提高应用程序的感知响应速度，并提供更流畅的用户体验。如果服务器端操作失败，您可以轻松地将 UI 恢复到其先前的状态。
如何实现 React Server Actions
实现 Server Actions 涉及定义 Action 函数、将其与组件关联以及处理结果。
定义 Server Action
Server Actions 使用 'use server' 指令进行定义。此指令告诉 React 编译器该函数应在服务器上执行。示例如下：
// app/actions.js
'use server'
import { cookies } from 'next/headers'
import { revalidatePath } from 'next/cache'
export async function createPost(formData) {
const title = formData.get('title')
const content = formData.get('content')
// Simulate database insert
await new Promise((resolve) => setTimeout(resolve, 1000))
console.log('Post created:', { title, content })
// Revalidate the blog route
revalidatePath('/blog')
return { message: 'Post created successfully!' }
}
在此示例中：
'use server'指令表明createPost函数应在服务器上执行。- 该函数接收一个
formData对象作为输入，其中包含从表单提交的数据。 - 该函数从
formData中提取title和content。 - 它使用
setTimeout模拟数据库插入操作。在实际应用中，您将用实际的数据库逻辑替换它。 revalidatePath函数使/blog路由的缓存失效，确保显示最新数据。- 该函数返回一个带有
message属性的对象，可用于向用户显示成功消息。
在 React 组件中使用 Server Actions
要在 React 组件中使用 Server Action，您可以导入 Action 函数并将其传递给 <form> 元素的 action 属性。示例如下：
// app/components/PostForm.js
import { createPost } from '../actions'
'use client'
import { useFormStatus } from 'react-dom'
function SubmitButton() {
const { pending } = useFormStatus()
return (
)
}
export default function PostForm() {
return (
)
}
在此示例中：
createPostAction 从../actions文件导入。<form>元素的action属性被设置为createPost函数。SubmitButton组件使用useFormStatus钩子来确定表单当前是否正在提交。它在表单提交期间禁用按钮以防止重复提交。
处理表单数据
Server Actions 会自动接收一个 FormData 对象作为表单数据。您可以使用 FormData 对象的 get 方法访问数据。示例如下：
// app/actions.js
'use server'
export async function createPost(formData) {
const title = formData.get('title')
const content = formData.get('content')
// ...
}
在此示例中，title 和 content 是使用 get 方法从 formData 对象中提取的。
向用户提供反馈
您可以通过从 Server Action 返回一个值来向用户提供反馈。调用该 Action 的组件将可以访问此值。您可以使用此值向用户显示成功或错误消息。示例如下：
// app/actions.js
'use server'
export async function createPost(formData) {
// ...
return { message: 'Post created successfully!' }
}
// app/components/PostForm.js
'use client'
import { useState } from 'react'
import { createPost } from '../actions'
export default function PostForm() {
const [message, setMessage] = useState(null)
async function handleSubmit(formData) {
const result = await createPost(formData)
setMessage(result.message)
}
return (
{message && {message}
}
)
}
在此示例中：
createPostAction 返回一个带有message属性的对象。PostForm组件使用useState钩子来存储消息。handleSubmit函数调用createPostAction，并将消息状态设置为该 Action 返回的值。- 消息在一个
<p>元素中显示给用户。
错误处理
Server Actions 可能会抛出错误，这些错误将被 React 运行时捕获。您可以在组件中使用 try...catch 块来处理这些错误。示例如下：
// app/actions.js
'use server'
export async function createPost(formData) {
// ...
if (!title || title.length < 5) {
throw new Error('Title must be at least 5 characters long.')
}
return { message: 'Post created successfully!' }
}
// app/components/PostForm.js
'use client'
import { useState } from 'react'
import { createPost } from '../actions'
export default function PostForm() {
const [message, setMessage] = useState(null)
const [error, setError] = useState(null)
async function handleSubmit(formData) {
try {
const result = await createPost(formData)
setMessage(result.message)
setError(null)
} catch (e) {
setError(e.message)
setMessage(null)
}
}
return (
{message && {message}
}
{error && {error}
}
)
}
在此示例中：
- 如果标题长度小于 5 个字符，
createPostAction 会抛出错误。 PostForm组件使用try...catch块来捕获createPostAction 抛出的任何错误。- 如果捕获到错误，错误消息将以红色文本显示在一个
<p>元素中。
使用 React Server Actions 的最佳实践
为确保您有效地使用 Server Actions，请考虑以下最佳实践：
使用 'use server' 指令
始终在您的 Server Action 文件的顶部包含 'use server' 指令。此指令告诉 React 编译器文件中的函数应在服务器上执行。这对安全性和性能至关重要。
保持 Action 小而专注
每个 Server Action 都应执行一个单一、明确定义的任务。这使您的 Action 更易于理解、测试和维护。避免创建执行多个不相关任务的大型、单一的 Action。
在服务器上验证数据
在执行任何操作之前，务必在服务器上验证数据。这可以保护您的应用程序免受无效或恶意数据的侵害。使用适当的验证技术，例如数据类型验证、长度检查和正则表达式。服务器端验证比可以被绕过的客户端验证更安全。
优雅地处理错误
始终在您的 Server Actions 中优雅地处理错误。这可以防止您的应用程序崩溃，并提供更好的用户体验。使用 try...catch 块来捕获可能发生的任何异常，并向用户提供信息丰富的错误消息。
使用乐观更新
使用乐观更新来提高应用程序的感知响应速度。立即更新 UI 以反映操作的预期结果，即使在服务器确认更改之前也是如此。如果服务器端操作失败，您可以轻松地将 UI 恢复到其先前的状态。
考虑缓存
考虑缓存 Server Actions 的结果以提高性能。这对于执行昂贵操作或频繁调用的 Action 特别有益。使用适当的缓存策略，例如 HTTP 缓存或服务器端缓存，以减轻服务器的负载。
保护您的 Server Actions
实施安全措施以保护您的 Server Actions 免遭未经授权的访问和篡改。使用身份验证和授权来确保只有授权用户才能执行某些操作。防范常见的安全漏洞，例如跨站脚本（XSS）和 SQL 注入。在将用户输入用于数据库查询或其他敏感操作之前，务必对其进行清理。
React Server Actions 的常见用例
Server Actions 非常适用于各种用例，包括：
表单提交
处理表单提交是 Server Actions 最常见的用例之一。您可以使用 Server Actions 来处理表单数据、验证输入并将数据存储在数据库中。这消除了对独立 API 端点的需求，并简化了您的开发工作流程。例如，处理用户注册、联系表单或产品评论。
数据变更
Server Actions 可用于执行数据变更，例如在数据库中创建、更新或删除数据。这使您可以根据用户操作更新应用程序的数据。示例包括更新用户个人资料、添加评论或删除帖子。
身份验证和授权
Server Actions 可用于处理身份验证和授权。您可以使用 Server Actions 来验证用户凭据、颁发令牌并保护敏感资源。这确保只有授权用户才能访问您应用程序的某些部分。例如，实现登录/注销功能、管理用户角色或授权访问特定功能。
实时更新
虽然 Server Actions 本身不是实时的，但它们可以与其他技术（如 WebSockets）结合使用，为您的应用程序提供实时更新。您可以使用 Server Actions 触发事件，然后通过 WebSockets 将这些事件广播到连接的客户端。可以想象实时聊天应用、协作文档编辑或实时仪表板。
国际化（i18n）注意事项
在为全球受众开发带有 Server Actions 的应用程序时，国际化（i18n）至关重要。以下是一些关键考虑因素：
错误消息的本地化
确保 Server Actions 返回的错误消息已本地化为用户的首选语言。这提供了更好的用户体验，并使用户更容易理解和解决任何问题。使用 i18n 库来管理翻译并根据用户的区域设置动态显示消息。
日期和数字格式化
根据用户的区域设置格式化日期和数字。不同的区域设置对于显示日期、数字和货币有不同的约定。使用 i18n 库根据用户的区域设置正确格式化这些值。
处理时区
在处理日期和时间时，请注意时区。以 UTC 格式存储日期和时间，并在显示时将其转换为用户的本地时区。这确保了无论用户位于何处，日期和时间都能正确显示。例如，安排事件或显示时间戳。
货币转换
如果您的应用程序涉及货币，请提供货币转换功能。允许用户以其本地货币查看价格。使用可靠的货币转换 API 来确保汇率是最新的。这对于电子商务应用程序和金融服务尤其重要。
从右到左（RTL）支持
如果您的应用程序支持从右到左书写的语言（RTL），例如阿拉伯语或希伯来语，请确保您的 UI 为这些语言正确镜像。这包括镜像布局、文本方向和图标。使用 CSS 逻辑属性来创建适应不同文本方向的布局。
React Server Actions 在全球应用中的示例
以下是一些 React Server Actions 如何在全球应用中使用的示例：
电子商务平台
- 将产品添加到购物车：可以使用 Server Action 将产品添加到用户的购物车。该 Action 可以验证产品 ID、检查库存水平并在数据库中更新购物车。
- 处理订单：可以使用 Server Action 来处理订单。该 Action 可以验证用户的支付信息、计算运费并在数据库中创建订单。
- 订阅新闻通讯：Server Action 可以处理新闻通讯订阅，验证电子邮件地址并将其添加到订阅列表中。
社交媒体平台
- 发表评论：可以使用 Server Action 在帖子上发表评论。该 Action 可以验证评论文本，将其与帖子关联，并将其存储在数据库中。
- 点赞帖子：可以使用 Server Action 来点赞帖子。该 Action 可以更新帖子的点赞数并将点赞记录存储在数据库中。
- 关注用户：Server Actions 可以管理关注请求、处理用户屏蔽并更新关注者数量。
旅行预订应用程序
- 搜索航班：可以使用 Server Actions 根据目的地和日期查询航班可用性。该 Action 可以调用外部 API、筛选结果并向用户展示选项。
- 预订酒店房间：Server Actions 可以处理酒店预订，确认房间可用性并处理支付细节。
- 评论旅游目的地：Server Action 可以处理添加和处理用户评论及评分。
React 服务器组件 vs. Server Actions
理解 React 服务器组件和 Server Actions 之间的区别很重要，因为它们经常协同工作但目的不同：
React 服务器组件
React 服务器组件是在服务器上渲染的组件。它们允许您在服务器上获取数据、执行逻辑并渲染 UI 元素，这可以提高性能并减少需要在客户端下载和执行的 JavaScript 数量。服务器组件主要用于渲染 UI 和获取初始数据。
Server Actions
Server Actions 是响应用户交互（如表单提交）而在服务器上运行的异步函数。它们主要用于处理数据变更、执行服务器端逻辑并向用户提供反馈。Server Actions 从客户端组件调用，通常是响应表单提交或其他用户事件。
主要区别：
- 目的：服务器组件用于渲染 UI，而 Server Actions 用于处理数据变更。
- 执行：服务器组件在初始页面加载期间在服务器上渲染，而 Server Actions 在响应用户交互时从客户端组件调用。
- 数据流：服务器组件可以直接从服务器获取数据，而 Server Actions 通过表单提交或其他用户事件从客户端接收数据。
它们如何协同工作：
服务器组件和 Server Actions 可以一起用于构建交互式 Web 应用程序。服务器组件可以渲染初始 UI 并获取初始数据，而 Server Actions 可以处理数据变更并向用户提供反馈。例如，服务器组件可以渲染一个表单，而 Server Action 可以处理表单提交并更新数据库中的数据。
结论
React Server Actions 为在您的 React 应用程序中处理表单处理、数据变更和其他服务器端操作提供了一种强大而高效的方式。通过利用 Server Actions，您可以简化开发工作流程、提高应用程序性能、增强安全性并提供更好的用户体验。随着您构建日益复杂的 Web 应用程序，理解和利用 React Server Actions 将成为现代 React 开发人员的一项基本技能。
请记住遵循本指南中概述的最佳实践，以确保您有效且安全地使用 Server Actions。通过拥抱 Server Actions，您可以释放 React 的全部潜力，并为全球受众构建高性能、用户友好的 Web 应用程序。